<template>
  <view class="pay-wrapper">
    <view class="pay-main-info">
      <view class="border price">
        {{ price }}
        <text class="price-danwei">元</text>
      </view>

      <view class="pay-no">
        终端号:
        <text>{{ device_code }}</text>
      </view>

      <view class="payType">
        <view class="weui-cells weui-cells_after-title wx-pay-box">
          <radio-group @change="radioChange" class="wx-pay-radio">
            <label class="weui-cell weui-check__label">
              <!--  #ifdef MP-WEIXIN	  -->
              <image class="wx-pay" src="/static/images/wx-pay.png"></image>
              <!--  #endif -->
              <!--  #ifdef MP-ALIPAY	  -->
              <image class="wx-pay" src="/static/images/ali-pay.png"></image>
              <!--  #endif -->
              <view class="weui-cell__bd">{{ itemsWX.name }}</view>
              <view class="weui-cell__hd">
                <radio :value="itemsWX.value" :checked="true" color="#FF6B03" />
              </view>
            </label>

            <!-- <label class="weui-cell weui-check__label" wx:if="">
            <image class='wx-pay' src='../../static/my/wallet3.png'></image>
            <view class="weui-cell__bd">{{itemsQB.name}}</view>
            <view class="weui-cell__hd">
              <radio value="{{itemsQB.value}}" />
            </view>
          </label> -->
          </radio-group>
        </view>
      </view>
    </view>
    <button class="submit_pay van-button" @click="clickToPay">确定支付</button>
    <!-- <van-button class="submit_pay" type="warning" @tap.native="clickToPay"
      >确定支付</van-button
    > -->
  </view>
</template>

<script>
let Sign = require('../../utils/sign.js');
const app = getApp();
const Api = app.globalData.Api;
export default {
  data() {
    return {
      user_id: '',
      device_code: '',
      price: '',
      // #ifdef MP-WEIXIN
      itemsWX: {
        value: 'WX',
        name: '微信支付'
      },
      pay_type: 'WX',
      // #endif
      // #ifdef MP-ALIPAY
      itemsWX: {
        value: 'ZFB',
        name: '支付宝支付'
      },
      pay_type: 'ZFB',
      // #endif
      itemsQB: {
        value: 'QB',
        name: '余额支付'
      }
    };
  }, //参数 user_id device_code price
  onLoad: function (options) {
    console.log(options);
    // this.setData({
    this.user_id = options.user_id,
      this.device_code = options.device_code,
      this.price = options.price
    // });

    //新协议充电桩 支付页进行自检
    this.sendMachine03(options.device_code);

    //更改用户的最新登录时间
    app.globalData.updateLastTime(options.user_id);
  },
  methods: {
    //充电桩自检
    sendMachine03: function (device_code) {
      if (device_code) {
        const signObject = {
          device_code
        };
        const signvalue = Sign.signutil(signObject);
        app.globalData
          .get(Api.sendMachine03, {
            device_code,
            sign: signvalue
          })
          .then((res) => {
            //console.log("自检结束！")
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },

    radioChange: function (e) {
      console.log('radio发生change事件，携带value值为：', e.detail.value);
      // this.setData({
      this.pay_type = e.detail.value
      // });
    },

    //用户点击确认支付方式 进行支付
    clickToPay() {
      console.log(this.pay_type);
      console.log('this.pay_type: ', this.pay_type);
      if (this.pay_type == 'WX') {
        //微信支付
        this.switchToWXPAY();
      } else if (this.pay_type == 'ZFB') {
        // TODO支付宝支付逻辑
      } else {
        //余额支付
        this.payByWallet();
      }
    },

    /**
     * 充电流程 2 确定支付的界面
     *    2.1 用户id 金额 终端 发送给服务器
     *    2.2 服务器从数据库查询自检结果，
     *    3.3 服务器端再进行一次状态查询，
     *    3.4 如果成功 准备向服务器数据库和微信支付双重下单
     *    3.5 数据库
     *
     */
    switchToWXPAY: function () {
      //用户扫码充电桩 跳转后台 判断充电桩属性 状态
      let useOfFunds = 'NEWCD'; //支付订单备注
      let user_id = this.user_id; //用户的订单
      let money = this.price; //订单的金额
      let device_code = this.device_code; //终端号

      //签名 传值
      const signObject = {
        useOfFunds,
        user_id,
        money,
        device_code
      };
      const signvalue = Sign.signutil(signObject);
      console.log(signObject);
      app.globalData
        .get(Api.newPayByWX, {
          user_id,
          useOfFunds,
          device_code,
          money,
          sign: signvalue
        })
        .then((res) => {
          console.log(res);
          // 支付
          uni.requestPayment({
            timeStamp: res.timeStamp,
            nonceStr: res.nonceStr,
            package: res.package,
            signType: res.signType,
            paySign: res.paySign,
            success: function (errmsg) {
              console.log(errmsg);
              //支付成功后执行
              if (errmsg.errMsg == 'requestPayment:ok') {
                uni.showToast({
                  title: '支付成功',
                  icon: 'success'
                });
                uni.reLaunch({
                  url: '/pages/orderList/orderList'
                });
              }
            },
            fail: function (res) {
              if (res.errMsg == 'requestPayment:fail cancel') {
                uni.showToast({
                  title: '支付取消',
                  icon: 'none'
                });
              } else {
                uni.showToast({
                  title: res.errmsg,
                  icon: 'none'
                });
              }
            }
          });
        })
        .catch((e) => {
          uni.showModal({
            title: e.message,
            content: ''
          });
        });
    },

    payByWallet: function () {
      let user_id = this.user_id;
      let device_code = this.device_code;
      let money = this.price;
      //签名 传值
      const signObject = {
        user_id,
        device_code,
        money
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.newPayByWallet, {
          user_id,
          device_code,
          money,
          sign: signvalue
        })
        .then((res) => {
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          });
          uni.reLaunch({
            url: '/pages/orderList/orderList'
          });
        })
        .catch((e) => {
          //console.log(e)
          uni.showModal({
            title: e.message,
            content: ''
          });
        });
    }
  }
};
</script>
<style>
@import "./tidNEWToPay.css";
@import "../../utils/weui.css";
</style>
